<template>
  <div class="four-chart-content">
    <div>
      <div class="label">资产总额（亿）</div>
      <div class="chart" ref="chart1"></div>
    </div>
    <div>
      <div class="label">营业收入</div>
      <div class="chart" ref="chart2"></div>
    </div>
    <div>
      <div class="label">利润总额</div>
      <div class="chart" ref="chart3"></div>
    </div>
    <div>
      <div class="label">平均投资回报率</div>
      <div class="chart" ref="chart4"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "FinancialFourChartModal",
  data() {
    return {
      myChart1: null,
      myChart2: null,
      myChart3: null,
      myChart4: null,
      list: [
        { name: 1, value: 7, line: 10 },
        { name: 2, value: 3.5, line: 40 },
        { name: 3, value: 8, line: 70 },
        { name: 4, value: 3.5, line: 40 },
        { name: 5, value: 8.8, line: 90 },
        { name: 6, value: 8.8, line: 90 },
        { name: 7, value: 6, line: 70 },
        { name: 8, value: 3.5, line: 80 },
        { name: 9, value: 6, line: 70 },
        { name: 10, value: 9, line: 40 },
        { name: 11, value: 9, line: 60 },
        { name: 12, value: 5, line: 20 },
      ],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const name = ["环比变动", "月末值值"];
      const list = this.list;
      const option = {
        grid: { left: 35, right: 40, bottom: 35, top: 60 },
        legend: {
          top: "22",
          right: "7",
          itemWidth: 12,
          itemHeight: 12,
          textStyle: { color: "#c4ccd7" },
          data: [
            { name: name[0], itemStyle: { color: "#ffffff" } },
            {
              name: name[1],

              itemStyle: { color: "#159AFF" },
            },
          ],
        },
        xAxis: {
          type: "category",
          axisLabel: {
            color: "#ACB6C7",
            formatter: (value) => value + "月",
          },
          axisTick: { show: false },
          axisLine: { lineStyle: { color: "#6C8097" } },
          data: list.map((i) => i.name),
        },
        yAxis: [
          {
            type: "value",
            name: "单位：亿元",
            nameTextStyle: { color: "#c4ccd7", padding: 6 },
            axisLabel: { color: "#ACB6C7" },
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: {
              lineStyle: { type: "dashed", color: " rgba(108,128,151,0.3)" },
            },
          },
          {
            type: "value",
            axisLabel: { textStyle: { color: "#fff" } },
            splitLine: { show: false },
            axisTick: { show: false },
          },
        ],
        series: [
          {
            name: name[0],
            data: list.map((i) => i.line),
            type: "line",
            symbolSize: 15,
            yAxisIndex: 1,
            symbol:
              "image://",
            itemStyle: { color: "#95A7BE" },
          },
          {
            name: name[1],
            type: "bar",
            label: {
              show: true,
              position: "top",
              color: "#FFFFFF",
              fontSize: 14,
            },
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  { offset: 0, color: "#159AFF" },
                  { offset: 0.96, color: "rgba(0,58,255,0)" },
                  { offset: 1, color: "#159AFF" },
                ]),
              },
            },
            barWidth: 16,
            data: list,
          },
        ],
      };

      this.myChart1 = echarts.init(this.$refs.chart1);
      this.myChart2 = echarts.init(this.$refs.chart2);
      this.myChart3 = echarts.init(this.$refs.chart3);
      this.myChart4 = echarts.init(this.$refs.chart4);
      this.myChart1.setOption(option);
      this.myChart2.setOption(option);
      this.myChart3.setOption(option);
      this.myChart4.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.four-chart-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  > div {
    width: 560px;
    &:nth-child(n + 2) {
      margin-top: 30px;
    }
  }
  .label {
    position: relative;
    width: 140px;
    height: 24px;
    line-height: 24px;
    font-weight: bold;
    color: #ffffff;
    padding-left: 12px;
    border-radius: 4px 0 0 0;
    background: linear-gradient(270deg, rgba(15, 63, 169, 0) 0%, #348ad4 100%);
    &:after {
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      content: "";
      width: 380px;
      height: 1px;
      background: linear-gradient(
        270deg,
        rgba(19, 50, 108, 0),
        rgba(56, 164, 249, 1)
      );
    }
  }
  .chart {
    width: 100%;
    height: 260px;
  }
}
</style>
